<template>
  <div class="form">
    <slot name="header"></slot>
    <active-desc v-if="showActive" @click-gift="$emit('click-gift')"></active-desc>
    <el-input class="form-control" v-model="tel" placeholder="请输入您的手机号码" />
    <el-input class="form-control" v-model="code" placeholder="请输入验证码">
      <div class="btn-code" slot="suffix" @click="handleGetCode">
        <span v-if="!isCounting">点击获取验证码</span>
        <span v-else>{{ maxCount - count }}秒后重新获取</span>
      </div>
    </el-input>
    <div class="protocol">
      <el-checkbox v-model="checked"></el-checkbox>
      <span>
        <span>同意</span>
        <a href="https://www.jdy.com/agreement/">《精斗云用户协议》</a>
        <span>和</span>
        <a href="https://www.jdy.com/conceal/">《精斗云客户隐私》</a>
      </span>
    </div>
    <el-button
      class="btn-register"
      @click="handleLogin"
      :loading="regLoading"
      :disabled="disabled"
    >立即免费试用</el-button>
  </div>
</template>

<script>
import popup from '@/components/popup-box';
import ActiveDesc from '@/components/active-desc';
import { Toast } from 'vant';

export default {
  components: {
    popup,
    ActiveDesc
  },
  props: {
    showActive: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      checked: true,
      tel: '',
      code: '',
      count: 0,
      maxCount: 60,
      isCounting: false,
      loading: false
    };
  },
  computed: {
    disabled() {
      return this.tel.length !== 11 || !this.checked || !this.code.length;
    },
    regLoading() {
      return this.$store.state.regLoading;
    }
  },
  mounted() {
    // this.runCount();
  },
  methods: {
    handleLogin() {
      this.$emit('click-login', {
        tel: this.tel,
        code: this.code
      });
    },
    runCount() {
      this.timeId = setInterval(() => {
        this.count++;
        this.isCounting = true;
        if (this.count >= this.maxCount) {
          this.count = 0;
          this.isCounting = false;
          clearInterval(this.timeId);
        }
      }, 1000);
    },
    handleGetCode() {
      if (this.isCounting) {
        return Toast('请耐心等待');
      }
      if (!this.tel) {
        return Toast('请输入正确的手机号码');
      }
      this.$emit('click-code', {
        tel: this.tel,
        success: this.runCount
      });
    }
  }
};
</script>

<style lang="postcss" scoped>
@keyframes move {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

a {
  color: inherit;
}

.form {
  overflow: hidden;
  padding: 0 16px;
  .form-control {
    margin-bottom: 24px;
  }
  /deep/ .el-input__inner {
    height: 48px;
    line-height: 48px;
    border-radius: 1px;
  }
  .btn-code {
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    padding-right: 16px;
    color: #1d63e2;
    cursor: pointer;
  }
  .el-checkbox {
    position: relative;
    margin-right: 6px;
    top: -2px;
  }
  .protocol {
    font-size: 13px;
    color: #666666;
    line-height: 22px;
    cursor: pointer;
  }
  .btn-register {
    width: 100%;
    height: 48px;
    font-size: 16px;
    margin-top: 30px;
    color: #fff;
    background: #00ccc5;
  }
  .icon-gift {
    width: 24px;
    height: 24px;
    margin-top: -4px;
    margin-right: 6px;
    animation: move 1000ms ease-in-out;
    animation-iteration-count: infinite;
  }
  .active-desc {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    line-height: 38px;
    margin-top: 32px;
    margin-bottom: 20px;
  }
  .num {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    margin: 0 3px;
    color: #f95f01;
  }
}
</style>
